<template>
  <div class="container">
    <!--个人中心 券列表 （转让）-->
    <div class="bgbox" v-if="isBg">
      <img src="https://img.ameimeika.com/h5_images/mp_images/3.3/nomsg.png" alt class="nothing" />
      <div class="text">暂无相关优惠券</div>
      <div class="buyBtn" @click="tomall">去购买</div>
    </div>
    <scroll-div
      :scroll-y="true"
      :style="{'height': '100%'}"
      @scroll="scroll"
      @scrolltolower="pullrefresh"
      class="scroll_div"
    >
      <ticket :list="list" v-if="totalList.valid_count>0"></ticket>
      <overdueTicket :list="list" v-if="totalList.invalid_count>0"></overdueTicket>
    </scroll-div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import ticket from "@/components/transfer/ticket";
import overdueTicket from "@/components/transfer/overdue_ticket";
export default {
  data() {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      list: [],
      isbottom: false,
      type:2  ,//1卡2券
      isBg:false,
      totalList:''
    };
  },
  components: {
    ticket,
    overdueTicket
  },
  methods: {
    getData() {
      if (this.isbottom) {
        return false;
      }
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post("/api/v4_5/c2c/my_card_ticket_list",
      {
       type:this.type
      }
      , msg => {
        wx.hideLoading();
        let res = msg.data;
        this.totalList = msg.data
        // console.log(this.totalList)
         
        if (res.status_code == 0) {
          if (!res.data.length || res.data.length ==0) {
            //没有数据
            this.isBg = true
            return;
          }else{
            this.isBg = false
          }
          
          res.data.forEach(element => {
              element.validity_start_time = new Date(element.validity_start_time * 1000).Format(
                "yyyy.MM.dd"
              );
                element.validity_end_time = new Date(element.validity_end_time * 1000).Format(
                 "yyyy.MM.dd"
              );
          });
        this.list = res.data
        //  console.log(this.list);
        } else {
          wx.hideLoading();
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: true
          });
          return false;
        }
      });
    },
    tomall(){
        wx.navigateTo({
        url: "/pages/ct_store/store/main"
      });
    },

    pullrefresh() {
      // this.pageNum++;
    }
  },

  onLoad() {
    wx.setNavigationBarTitle({
      title: "券"
    });
    // Object.assign(this.$data, this.$options.data());
    this.getData()
  },
  onShow() {
    this.getData()
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f3f4f6;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  box-sizing: border-box;
  padding: 0 12px;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  margin-top: 8px;
  // margin-bottom: 2px;
}

.bgbox {
  width: 100%;
  height: 100%;
  padding: 90px 0;
  box-sizing: border-box;
  .nothing {
    width: 128px;
    height: 114px;
    margin: 0 auto;
    display: block;
  }
  .text {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    margin-top: 13px;
    color: rgba(153, 153, 153, 1);
    text-align: center;
  }
  .buyBtn {
    width: 106px;
    height: 38px;
    background: linear-gradient(
      225deg,
      rgba(254, 120, 161, 1) 0%,
      rgba(254, 123, 136, 1) 100%
    );
    border-radius: 19px;
    line-height: 38px;
    text-align: center;
    margin: 44px auto 0;
  }
  color: rgba(255, 255, 255, 1);
  font-weight: 500;
  font-size: 14px;
}
</style>
